/* Card Slider Styling */
section.pureflowcss-card-slider-area{
    display: grid;
    place-items: center;
    gap: 1.5em;
  }
  
  section.pureflowcss-card-slider-area .card-slider-top{
    padding-inline: 3em;
  }
  
  .pureflowcss-card-slider-container-parent{
    display: flex;
    justify-content: start;
    align-items: center;
    overflow-x: auto;
    min-width: 100%;
    max-width: 100%;
    scroll-behavior: smooth;
    user-select: none;
  -webkit-user-drag: none;
  }
  
  .pureflowcss-card-slider-container-parent.dragging {
    cursor: grabbing;
  }
  
  .pureflowcss-card-slider-container-parent {
    cursor: grab;
  }
  
  
  @supports(scrollbar-color: red blue){
    .pureflowcss-card-slider-container-parent{
        scrollbar-color: transparent transparent;
        scrollbar-width: thin;
    }
  }
  
  .pureflowcss-card-slider-container{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 2em;
  }
  
  .pureflowcss-card-slider-card{
    display: flex;
    flex-direction: column;
    width: 10em;
    gap: .5em;
    user-select: none;
  }
  
  .card-slider-container:not(.card-slider-container-grid-area) .pureflowcss-card-slider-card:first-child{
    margin-left: 2em;
  }
  
  .card-slider-container:not(.card-slider-container-grid-area) .pureflowcss-card-slider-card:last-child{
    margin-right: 2em;
  }
  
  @media screen and (max-width: 625px){
    section.pureflowcss-card-slider-area .card-slider-top{
        padding-inline: 1.5em;
    }
  
    .card-slider-container:not(.card-slider-container-grid-area) .pureflowcss-card-slider-card:first-child{
        margin-left: 1em;
    }
    
    .card-slider-container:not(.card-slider-container-grid-area) .pureflowcss-card-slider-card:last-child{
        margin-right: 1em;
    }
  }
  
  .pureflowcss-card-slider-card .pureflowcss-card-slider-img-area{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    min-height: 13em;
    max-height: 13em;
  }
  
  .pureflowcss-card-slider-card .pureflowcss-card-slider-img-area img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .pureflowcss-card-slider-card .pureflowcss-card-slider-img-area a{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--clr-accent);
    z-index: 5;
    border-radius: 100vw;
    width: 4em;
    height: 4em;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    overflow: hidden;
  }
  
  .pureflowcss-card-slider-card .pureflowcss-card-slider-img-area a svg{
    transform: translateX(-15px);
    transition: .2s;
    opacity: .5;
  }
  
  .pureflowcss-card-slider-card .pureflowcss-card-slider-img-area::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--clr-rgba-gray-med-darker);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
  }
  
  .pureflowcss-card-slider-card:hover .pureflowcss-card-slider-img-area::before{
    opacity: 1;
    visibility: visible;
  }
  
  .pureflowcss-card-slider-card:hover .pureflowcss-card-slider-img-area a{
    opacity: 1;
    visibility: visible;
  }
  
  .pureflowcss-card-slider-card:hover .pureflowcss-card-slider-img-area a svg{
    opacity: 1;
    transform: translateX(0);
  }
  
  .pureflowcss-card-slider-card .pureflowcss-card-slider-img-area:focus a svg{
    opacity: 1;
    transform: translateX(60px);
  }
  
  @media screen and (max-width: 600px){
    .pureflowcss-card-slider-card:hover .pureflowcss-card-slider-img-area a svg{
        opacity: 1;
        transform: translateX(60px);
    }
    .pureflowcss-card-slider-card .pureflowcss-card-slider-img-area a svg{
        transform: translateX(0);
        transition: .5s;
  }
  }
  
  .pureflowcss-card-slider-card .pureflowcss-card-slider-img-area span{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--clr-light);
    font-size: var(--fs-xs);
    padding: .3em .7em .3em .5em;
    top: 0;
    left: 0;
    background-color: var(--clr-accent);
    border-bottom-right-radius: 15px;
  }
  
  .pureflowcss-card-slider-card .pureflowcss-card-slider-info-area{
    padding-inline: .5em;
  }
  
  .pureflowcss-card-slider-card .pureflowcss-card-slider-info-area span{
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Card Slider Styling Ends */




  /* Smooth Card Slider Styling */
    /* Container Style */
    .pureflowcss-smooth-slider-container {
      scroll-snap-type: x mandatory; /* Horizontal shift and forced docking */
      overflow-x: auto; /* Enable horizontal sliding */
      display: flex; /* Sort items side by side */
      cursor: grab;
      user-select: none;

      /* Make you own stling here */
      width: 100%; /* Container width */
      height: 300px; /* Container height */
    }

    .pureflowcss-smooth-slider-container.dragging {
      cursor: grabbing;
  }

    @supports(scrollbar-color: red blue){
      /* Use this if you want to make the scrollbar invisible

      Or you can set any color you want for the scrollbar */ 
      .pureflowcss-smooth-slider-container{
          scrollbar-color: transparent transparent;
          scrollbar-width: thin;
      }
    }

    /* Item */
    .pureflowcss-smooth-slider-item {
      scroll-snap-align: start; /* Clamp each item to the origin */
      flex: 0 0 100%; /* Make each element span the full width of the container */
      width: 100%; /* Item width */
      height: 100%; /* Item height */
      
      /* Make you own stling here */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: white;
    }
    /* Smooth Card Slider Styling Ends */